<template>
  <div>
    <el-row>
      <el-col :span="24" style="border-bottom: 1px solid #cccccc;height: 60px;line-height: 60px;">
        <h2>我的收藏</h2>
      </el-col>

    </el-row>

    <el-row v-if="MyFavorites.length != 0" style="margin-top:30px ;">
      <el-col class="animate__animated animate__bounceInRight" :class="{ 'animate__bounceOut': deletecard == index }"
        style="margin-top:15px ;" :Span="6" v-for="(i, index) in MyFavorites" :key="index">
        <el-card :body-style="{ padding: '0px', }">
          <img :src="i.productImageditys" class="image">
          <div style="padding: 14px;">
            <span>{{ i.productTitleditys }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ i.collectionTimeLists }}</time>
              <el-button type="text" class="button" @click="open(i.id, index)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  /* width: 100%; */
  height: 100px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

<script>
import { getPersonaFavorites } from "@/api/personalCenter";
import { cancelGoodsCollection } from "@/api/details";

export default {
  data() {
    return {
      MyFavorites: [], //我的收藏列表
      userId: JSON.parse(localStorage.getItem("user")).id,
      loading: false,
      deletecard: -1,
    }

  },
  created() {
    this.getPersonaFavorites();
  },
  methods: {
    open(goodId, index) {
      this.$confirm('确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onDelete(index);//修改类，添加删除动画
        this.canCle(goodId)
        this.deletecard = -1;//格式化
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 获取我的收藏
    getPersonaFavorites() {
      getPersonaFavorites({ id: this.userId, page: 1 }).then(res => {
        console.log(res);
        this.MyFavorites = res;
        this.loading = false;
      })
    },
    onDelete(index) {
      this.deletecard = index;
    },
    //删除收藏
    canCle(goodId) {
      this.loading = true;
      cancelGoodsCollection({ goodsId: goodId, userId: this.userId }).then((res) => {
        console.log(res);
        this.loading = false;
        if (res.gode = 200) {
          this.getPersonaFavorites();
        }
      })
    }
  },



}

</script>